<template>
  <div class="box">
    <div class="headers">
      <div :class="!btnLeft?'btnlefta':'btnleftb'" @click="Left">
        すべて
      </div>
      <div :class="!btnRight?'btnrighta':'btnrightb'" @click="right">
        時間選択

      </div>
    </div>
    <div class="showSort" v-show="btnLeft">
      <div v-for="n in Sortstate" :key="n.id" @click="sortState(n.id)">{{n.tit}}</div>

    </div>
    <div class="showSort showTimeSort" v-show="btnRight" >
      <div @click="our">全商品</div>
      <div v-for="n in SortTimeList" @click="sortTime(n.id)">{{n.activity_time}}</div>

    </div>
    <van-list
      :immediate-check="check"
      class="shopLists"
      :finished="finished"
      v-model="loading"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <div class="shop" @click="goMessage(n.id)" v-for="n in list">
        <div class="cheng">{{n.zuoL}}</div>
        <img :src="n.picUrl" alt="">
        <div class="reg"><span class="pinzhi">{{n.valueStandard}}</span><span>{{n.brandName}}</span></div>
        <div class="name">{{n.productName}}</div>
        <p class="price"><span>自社入札：</span>{{n.myBidPrice}}</p>
        <p class="num"><span>番号：</span>{{n.id}}</p>
      </div>
    </van-list>
    <div class="block" v-show="block" @click="close"></div>
  </div>
</template>

<script>
  import { List } from 'vant';

  Vue.use(List);
  import { Toast } from 'vant';

  Vue.use(Toast);
  let loadingTemp = false;
  import Vue from 'vue';
  import { Lazyload } from 'vant';

  // options 为可选参数，无则不传
  Vue.use(Lazyload,{
    lazyComponent:true,

  })
  import axios from "axios"
  export default {
    name: "myShopList",
    data(){
      return{
        check:false,
        finished:false,
        error: false,
        loading: false,
        block:false,
        Sortstate:[
          {
            id:0,
            tit:"すべて"
          },{
          id:1,
            tit:"成約"
          },{
          id:2,
            tit:"セリ中"
          }
        ],
        SortTimeList:[],
        btnRight:false,
        btnLeft:false,
        isLoading: false,

        list:[

        ],
        base:true,
        btn:false,
        mask:true,
        total:"",
        pages:"",
        pageSize:10,
        pageNum:0,
        userid:"",
        state:"",
        bidActivityId:""
      }
    },
    methods:{
      //
      onLoad(){
        this.init()
      },
      //全部
      our(){
        this.bidActivityId="";
        this.state = "";
        this.close();
        this.sort()
      },
      //筛选时间
      sortTime(i){
        console.log(i)
        this.close();
        this.bidActivityId=i
        this.state=""
        this.sort()
      },
      //筛选交易类型
      sortState(i){
        console.log(i)
        this.close();
        this.state=i
        this.bidActivityId=""
        this.sort()
      },
      close(){
        this.btnLeft=false,
        this.btnRight=false
        this.block=false
      },

      //获取活动时间
      getActivity(){
        axios.post("http://auction.growthupup.com/api/public/index/auction/get_bid_activities").then(res=>{
          // console.log(res)
          if(res.data.code==666){
            this.SortTimeList = res.data.data.data
          }
        })
          .catch(res=>{
            // console.log("sss")
            // console.log(res)
          })
      },
      //根据时间筛选
      right(){
        this.btnRight=true
        this.btnLeft=false
        this.block=true
      },
      //根据状态筛选
      Left(){
        this.btnLeft=true
        this.btnRight=false
        this.block=true
      },

      // 获取用户名

      // 跳转到详情页
      goMessage(i){
        this.$router.push({
          path: '/GoodsDetails',
          query: {
            userId: this.userid,
            productId:i
          }

        })
      },
      changea(){
        if(!this.btn){
          return
        }
        console.log(this.btn)
        this.btn=false
      },
      changeb(){
        if(this.btn){
          return
        }

        this.btn=true
      },

      getuserid(){
        this.userid = this.$route.query.userId ? this.$route.query.userId :this.userid

      },

      sort(){
        var that = this
        axios.get("http://auction.growthupup.com/wap/auction/myAuction?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&state="+this.state+"&bidActivityId="+this.bidActivityId+"&userId="+this.userid).then(res=>{
          if(res.data.success){
            that.list = res.data.data.data

            that.list.forEach(r=>{
              if(r.dealtUserId==null || r.dealtUserId == ""){
                r.zuoL = "Bidding"
                console.log("bidding")
              }else if(this.userId ==r.dealtUserId){
                r.zuoL = "成約"

              }else{
                r.zuoL="失敗"
                console.log("失败")
              }

            })
          }
        })
      },
      init() {
        //成約/失敗
        loadingTemp = true
        this.pageNum =this.pageNum+ 1;
        axios.get('http://auction.growthupup.com/wap/auction/myAuction?pageNum='+this.pageNum+"&pageSize="+this.pageSize+"&userId="+this.userid)
          .then(res => {
            loadingTemp = false;
            this.loading = false;
            this.isLoading = false;//下拉刷新
            if (res.data.success){
              const result = res.data.data.data;
              result.forEach(r=>{
                r.zuoL=""
                if(r.dealtUserId==null || r.dealtUserId == ""){
                  r.zuoL = "Bidding"
                  console.log("bidding")
                }else if(this.userid ==r.dealtUserId){
                  r.zuoL = "成約"
                  // console.log("成功")
                }else{
                  r.zuoL="失敗"
                  // console.log("失败")
                }


              })

              if(res.data.pageNum==1){
               this.list = result
              }else{
               result.forEach(r=>{
                 this.list.push(r)
               })
              }
              if(result.length<10){
                this.finished=true
              }

            }

          })
      },
    },
    created() {
      this.getActivity();
      this.getuserid();
      this.init();

    },

  }
</script>

<style lang="scss">
  .block{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: .44rem;
    background:#979797;
  }

  .box{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .showSort{
    position: fixed;
    left: 0;
    top: .44rem;
    z-index: 100;
    width: 100%;
    background:#FFFFFF;
    text-align: center;
    display: flex;
    flex-direction: column;

    div{
      flex: 1;
      line-height: .44rem;
      border-bottom: 1px solid #E5E5E5;
      width: 3.43rem;
      margin:0 auto;
    }
  }
  .headers{
    height: .44rem;
    font-size: .14rem;
    color:#333333;
    display: flex;
    width: 100%;
    z-index: 11;
    background: #FFFFFF;
    box-shadow:0 .04rem .16rem 0 rgba(0,0,0,0.1);
    margin-bottom:.16rem;
    .btnlefta{
      text-align: center;
      line-height: .44rem;
      width: 50%;
      position: relative;
      z-index: 100;
      background: #FFFFFF;
      color:#333333;
    }
    .btnleftb{
      text-align: center;
      line-height: .44rem;
      width: 50%;
      position: relative;
      z-index: 100;
      background: #333333 ;
      color:#FFFFFF;
    }

    .btnrighta{
      text-align: center;
      line-height: .44rem;
      width: 50%;
      position: relative;
      z-index: 100;
    }
    .btnrightb{
      text-align: center;
      line-height: .44rem;
      width: 50%;
      position: relative;
      z-index: 100;
      background: #333333 ;
      color:#FFFFFF;
    }

  }
  .nav{
    display: flex;
    width: 100%;
    div{
      height: .49rem;
      font-size: .16rem;
      line-height: .46rem;
      transition: all .3s;
      text-align: center;
      overflow: hidden;
      color:#FFFFFF;
    }
    div:nth-child(1){
      background: #333333;
      margin-right: 4px;

    }

    div:nth-child(2){
      background: #FF595E;
    }
    .a{
      width: 21%;
      font-weight:500;
      font-size:.12rem;
      font-family:PingFangSC-Medium;

    }
    .b{
      width: 100%;
      font-weight:100;
      font-size:.16rem;
      font-weight:500;
      font-family:PingFangSC-Regular;

    }
  }
  .shopLists{
    flex:1;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    padding:0 .16rem;
    box-sizing: border-box;
    justify-content: space-between;
    .shop{
      margin-bottom: .1rem;
      position: relative;
      width: 48%;
      background:rgba(255,255,255,1);
      margin-bottom: .12rem;
      display: flex;
      flex-direction: column;
      height:2.6rem;
      box-shadow: 0 .04rem .16rem 0 rgba(0,0,0,0.1);
      .cheng{
        /*width: .3rem;*/
        padding:.1rem;
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        color:white;
        font-size: .1rem;
        text-align: center;
        line-height: .12rem;
      }
      img{
        width: 100%;
        height: 1.66rem;
        overflow: hidden;
        margin-bottom:.08rem;
      }
      .reg{
        font-size: .14rem;
        color:#333333;
        display: flex;
        margin-bottom: 4px;
        span:nth-child(1){
          display: block;
          width: .19rem;
          height: .19rem;
          background: #333333;
          color:#FFFFFF;
          font-size: .11rem;
          line-height: .19rem;
          text-align: center;
          margin-left: .08rem;
          margin-right: .07rem;
        }
        span:nth-child(2){
          overflow:hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 1.6rem;
        }
      }
      .name{
        font-size:.12rem;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:.17rem;
        margin-left: .08rem;
        margin-bottom: .04rem;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 1.6rem;
      }
      .price{
        font-size:.12rem;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(229,32,32,1);
        line-height:.17rem;
        span{
          font-size:9px;
          font-family:PingFangSC-Light;
          font-weight:300;
          color:rgba(51,51,51,1);
          line-height:13px;
          margin-left:.08rem;
        }
      }
      .valence{
        font-size:.09rem;
        font-family:PingFangSC-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:.13rem;
        margin-left: .08rem;

      }
      .num{
        font-size:12px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:.17rem;
        span{
          font-size:9px;
          font-family:PingFangSC-Light;
          font-weight:300;
          color:rgba(51,51,51,1);
          line-height:13px;
          margin-left: .08rem;
        }
      }
      .state{
        width:.5rem;
        height:.29rem;
        background:rgba(229,32,32,1);
        color:#FFFFFF;
        font-size: .18rem;
        position: absolute;
        text-align: center;
        top: 3px;
        right: 3px;
      }
      .start{
        width:.5rem;
        height:.29rem;
        color:#FFFFFF;
        font-size: .18rem;
        position: absolute;
        top: 3px;
        right: 3px;
        background: #888888;
        text-align: center;
      }

    }

  }
  .lastbtn{
    width: 100%;
    position: fixed;
    bottom: .25rem;
    left: 0;
    .btn{
      margin:0 auto;
      width: 68%;
      height: .6rem;
      background:rgba(229,32,32,1);
      box-shadow:0px 2px 8px 0px rgba(0,0,0,0.1);
      border-radius:.35rem;
      font-size:.2rem;
      left: .6rem;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:.6rem;
      text-align: center;
      .right{
        display: inline-block;
        width: .15rem;
        height: .15rem;
        margin-left: .17rem;
        background-image: url("../assets/image/arrow-right.png");
        background-size: cover;
      }
    }
  }
</style>
